<template>
  <view class="newUser">
    <image
      mode="aspectFill"
      :src="asyncImgs.index.bg2"
      class="module-bg"
    ></image>
    <view class="newUserContent newUserData">
      <view class="newUserTit">
        <view class="title">
          <view class="titLet">新人专享券</view>
        </view>
      </view>

      <scroll-view scroll-x class="list">
        <view
          :class="[
            'item',
            getText(item) === '已过期' || !item.user_coupon ? 'disabled' : '',
          ]"
          v-for="item of couponList"
          :key="item.id"
        >
          <view class="boxHd">
            <image
              class="img"
              :src="asyncImgs.index.bg1"
              mode="aspectFill"
            ></image>
            <view class="box">
              <view
                :class="[
                  'status',
                  getText(item) === '已过期' || !item.user_coupon
                    ? 'disabled'
                    : '',
                ]"
                >{{ getStatus(item) }}</view
              >
              <view :class="['price', getDiscountType(item)[1]]">{{
                getDiscountType(item)[0]
              }}</view>
              <view class="des">满{{ item.min_price }}元可用</view>
            </view>
          </view>
          <view class="text">{{ getText(item) }}</view>
        </view>
      </scroll-view>

      <view class="btn" @click="goUrl">{{
        isLogin ? "去使用" : "立即领取"
      }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "newUserCoupon",
  props: {
    couponList: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  data() {
    return {};
  },

  methods: {
    goUrl() {
      if (this.isLogin) {
        // this.$utils.toUrl(`/marketing/newUser/list/index`);
      this.$emit('use')
      } else {
        uni.redirectTo({
          url: "/login/login/login_page",
        });
      }
    },
  },

  computed: {
    isLogin() {
      if (uni.getStorageSync("token")) {
        return true;
      }
      return false;
    },

    getText() {
      return (item) => {
        let str = "";

        if (!item.user_coupon && item.auto_send) {
          switch (item.auto_send.ext_type) {
            case "0":
              break;

            case "1":
              str = "完成注册领取";
              break;

            case "2":
              str = "完成首单领取";
              break;

            case "3":
              str = "完成次单领取";
              break;
          }
          return str;
        } else {
          if (item.user_coupon && item.user_coupon.end_time) {
            let endTime = item.user_coupon.end_time * 1000,
              activeTime = new Date().getTime();

            if (activeTime < endTime) {
              let timeRemaining = endTime - activeTime,
                day = parseInt(timeRemaining / 86400000);

              if (day > 7) {
                str = "可使用";
              } else if (day < 7 && day > 1) {
                str = `${day}天后过期`;
              } else {
                str = "即将过期";
              }
            } else {
              str = "已过期";
            }
          }
        }

        return str;
      };
    },

    getDiscountType() {
      return (item) => {
        let arr = [];

        if (item.discount_type === "1") {
          arr = [item.discount, "s1"];
        } else {
          arr = [item.sub_price, "s2"];
        }
        return arr;
      };
    },

    getStatus() {
      return (item) => {
        if (!item.user_coupon) {
          return "待解锁";
        } else {
          if (this.getText(item) === "已过期") {
            return "已过期";
          }

          return "待使用";
        }
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.newUser {
  position: relative;
  z-index: 2;
  border-radius: 24rpx;
  margin: 0 24rpx;

  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 24rpx;
  }
}

.newUserData {
  padding: 22rpx 24rpx 30rpx;
}

.newUserTit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;

  .title {
    flex: 1;
    display: flex;
    align-items: flex-end;
    line-height: 1;
  }

  .titLet {
    margin-right: 20rpx;
    font-size: 32rpx;
    font-weight: bold;
  }

  .titRig {
    font-size: 24rpx;
  }
}

.list {
  padding: 22rpx 0 0;
  white-space: nowrap;
  overflow-x: auto;
  .img {
    position: relative;
    display: block;
    width: 180rpx;
    height: 140rpx;
  }

  .item {
    vertical-align: top;
    display: inline-block;
    margin-right: 20rpx;
    width: 180rpx;
    overflow: hidden;
    box-sizing: border-box;
  }

  .boxHd {
    position: relative;
    border-radius: 24rpx;
  }

  .box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-end;
  }

  .status {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 12rpx;
    background: #fc958d;
    color: #fff;
    border-radius: 0px 8rpx 0px 8rpx;
    text-align: center;
    font-size: 24rpx;
  }

  .disabled {
    opacity: .95;

    .status {
      background: #c8c8c8;
    }
  }

  .des {
    height: 50rpx;
    text-align: center;
    line-height: 50rpx;
    text-align: center;
    overflow: hidden;
    color: #fa2c1b;
    font-size: 24rpx;
  }

  .price {
    font-size: 40rpx;
    color: #fa2c1b;

    &.s2:before {
      content: "￥";
      font-size: 30rpx;
    }

    &.s1:after {
      content: "折";
      font-size: 30rpx;
    }
  }

  .text {
    display: block;
    padding: 20rpx 0 24rpx;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #ffffff;
    font-size: 24rpx;
  }
}

.btn {
  margin: 0 auto;
  width: 348rpx;
  height: 76rpx;
  line-height: 76rpx;
  border-radius: 32px;
  text-align: center;
  background-image: linear-gradient(#fcf4cd, #f5cb7f);
  color: #f60313;
  font-size: 28rpx;
  font-weight: bold;
}
</style>
